<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: rgba(228, 228, 234, 0.043);
        }

        .image img {
            width: 200px;
            height: 100%;
        }

        .ul {
            display: flex;
            flex: 1;
            flex-wrap: wrap;
            border: 1px dotted black;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .li {
            position: relative;
            height: 200px;
            text-align: left;
            margin: 10px;
            border: 1px dotted black;
        }

        .li .image {
            height: 150px;
            background-size: cover;
        }

        .li .title {
            height: 50px;
            left: 0;
            top: 0;
            color: red;
        }

        .border {
            border: 3px solid #ccc;
        }
    </style>
</head>

<body>
    <div>
        <!-- <p>文章信息参考自<a href="https://www.wenzizhan.com/">文字站</a></p>
        <p>工具网站<a href="https://www.bejson.com/text/text_replace_hr/#google_vignette">文本处理网站</a></p> -->
        <input type="text" class="searchInput">
        <button class="searchBtn">搜索</button>
        <button class="lookBtn">查看</button>
        <button class="updateBtn">更改</button>
        <button class="deleteBtn">删除</button>
        <button class="reset">重置</button>
        <audio controls autoplay>
            <source src="./src/1.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
    </div>
    <div class="ul">
    </div>
    <script src="./storage.js"></script>
    <script>
        //获取到Array.prototype中的属性
        let res = Object.getOwnPropertyNames(Array)
        console.log(res)  //总共有length、name、prototype、isArray、from、fromSync、of

        console.log(mockData)

        /**
         * onload 
         * 加载数据
         * @param {object} target 
         * @return {void}
         */
        function onload() {
            //从loacalStorage中读取数据
            if (!localStorage.getItem("list")) {
                test.init(mockData)
                localStorage.setItem("list", JSON.stringify(test.data))
            } else {
                test.init(JSON.parse(localStorage.getItem("list")))
            }
        }

        /**
         * updateStorage 
         * 更新Storage
         * @param {object} target 
         * @return {void}
         */
        function updateStorage() {
            localStorage.setItem("list", JSON.stringify(test.data))
        }

        /**
         * create 
         * 新增一个需求根据数据动态动态生成li的数量
         * @param {object} target 
         * @return {void}
         */
        function appendLiChild(target) {
            // 创建外层 div 元素
            const outerDiv = document.createElement('div');
            outerDiv.className = 'li';

            // 创建 image div 元素
            const imageDiv = document.createElement('div');
            imageDiv.className = 'image';

            // 创建 img 元素并添加到 image div 中
            const img = document.createElement('img');
            // 如果需要设置图片的 src 等属性可以在这里设置，例如 img.src = '图片路径'
            imageDiv.appendChild(img);

            // 创建 title div 元素
            const titleDiv = document.createElement('div');
            titleDiv.className = 'title';

            // 创建 input 元素
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'id';
            input.value = 'id'; // 如果需要设置特定的 id 值，可以在这里修改
            input.className = 'id';

            // 将各个元素添加到外层 div 中
            outerDiv.appendChild(imageDiv);
            outerDiv.appendChild(titleDiv);
            outerDiv.appendChild(input);

            // 最后将生成的 outerDiv 添加到文档中的合适位置，例如添加到 body 中
            target.appendChild(outerDiv);
        }




        // 参数传递数据
        function applyHomePage(data) {
            let ul = document.querySelector('.ul')
            //先将ul下的子元素删除掉
            while(ul.firstChild){
                ul.removeChild(ul.firstChild)
            }
            //根据data实际元素的数量渲染出对应的列表数据
            data.forEach((item, index) => {
                appendLiChild(ul)
            })


            console.log("将数据赋值到页面", data)
            
            let lis = document.querySelectorAll('.li');
            let images = []
            let titles = []
            let ids = []
            //将数据渲染到页面上
            lis.forEach((item, index) => {
                images.push(item.querySelector('.image'))
                titles.push(item.querySelector('.title'))
                ids.push(item.querySelector('.id'))
            })
            //从localstorage中
            data.forEach((item, index) => {
                console.log("item", item)
                console.log("index", index)
                console.log("images[index]", images[index])
                console.log("titles[index]", titles[index])
                console.log("ids[index]", ids[index])
                images[index].style.backgroundImage = "url(" + item.src + ")"
                titles[index].innerText = item.title
                ids[index].value = item.id
            })
        }

        function applyDetailPage() {
            test.data.forEach((item, index) => {
                console.log("item", item)
                console.log("index", index)
                console.log("images[index]", images[index])
                console.log("titles[index]", titles[index])
                console.log("ids[index]", ids[index])
                images[index].style.backgroundImage = "url(" + item.src + ")"
                titles[index].innerText = item.title
                ids[index].value = item.id
            })
        }



        //创建一个构造函数

        function Data() {

        }
        //创建一个json数据
        Data.prototype.storageType = "json"
        Data.prototype.data = []
        //初始化数据
        Data.prototype.init = function (sourceData) {
            this.data = []
            sourceData.forEach(item => {
                const id = Math.random().toString(36).substr(2, 9)
                const target = {}
                Object.assign(target, item)
                //这里因为重复拿到localstorage的数据，所以如果已经有id就不需要更改了。
                if(!target.id){
                    target.id = id
                }
                // console.log("插入数据之后为:" + target.src)
                this.data.push(target)
            })
                updateStorage(this.data)
                applyHomePage(this.data)
        }
        //创建一个Data的方法，提供调用
        Data.prototype.add = function (obj) {
            const id = Math.random().toString(36).substr(2, 9)
            const target = {}
            Object.assign(target, obj)
            target.id = id
            // console.log("插入数据之后为:" + target.src)
            this.data.push(target)
            //更新storage和页面
            updateStorage(this.data)
            applyHomePage(this.data)
        }

        //按照规定的index进行删除
        Data.prototype.delete = function (id) {
            console.log("delete id",id)
            this.data.forEach((item, index) => {
                console.log("item id",item.id)
                if (item.id === id) {   
                    console.log("findItem",item)
                    this.data.splice(index, 1)
                }
            })
            console.log(this.data)
            //更新storage和页面
            updateStorage(this.data)
            applyHomePage(this.data)
        }

        //根据指定的index进行更新
        Data.prototype.update = function (id, obj) {
            //已有的条件 id， obj
            //查找出对应的obj
            console.log("id", id)
            this.data.forEach((item, index) => {
                console.log("index2", index)
                console.log("item2", item)
                let targetObj;
                if (item.id === id) {
                    const properties = Object.keys(obj)
                    for (let i = 0; i < properties.length; i++) {
                        const shuxingzhi = properties[i]
                        console.log("this.data[index]", this.data[index])
                    }
                }
            })
            //更新storage
            updateStorage(this.data)
            applyHomePage(this.data)
        }

        //根据id值查找对应的data数据
        Data.prototype.find = function (id) {
            //已经有的条件 id
            //查找中
            let resultData
            console.log("id", id)
            this.data.forEach((item, index) => {
                if (item.id === id) {
                    resultData = item
                }
            })
            console.log("resultData", resultData)
        }

        //测试
        let test = new Data()
        onload()
        applyHomePage(test.data)



        //操作栏进行修改
        let ul = document.querySelector(".ul")
        let clickItem
        let searchBtn = document.querySelector(".searchBtn")
        let lookBtn = document.querySelector('.lookBtn')
        let updateBtn = document.querySelector('.updateBtn')
        let deleteBtn = document.querySelector('.deleteBtn')
        let reset = document.querySelector('.reset')

        lookBtn.addEventListener('click', function () {
            let id = clickItem.querySelector('input').value
            let baseUrl = 'detail.html'
            let url = `${baseUrl}?id=${id}`;
            window.location.href = url;
        })
        updateBtn.addEventListener('click', function () {
            let id = clickItem.querySelector('input').value
            let baseUrl = 'edit.html'
            let url = `${baseUrl}?id=${id}`;
            window.location.href = url;
        })


        searchBtn.addEventListener('click', function () {
            let searchInput = document.querySelector('.searchInput')
            console.log("搜索输入的内容", searchInput.value)
            let forData = [...test.data] 
            let copyData = [...forData]
            //将数组为空，伪数据更新
            forData = []

            copyData.forEach((item, index) => {
                if(item.content.includes(searchInput.value.trim()) || item.title.includes(searchInput.value.trim())){
                    //更新数组数据，为一个搜索列表,
                    console.log(item)
                    forData.push(item)
                }
            })
            applyHomePage(forData)
        })

        deleteBtn.addEventListener('click', function(){
            test.delete(clickItem.querySelector('input').value)
        })

        reset.addEventListener('click', function(){
            test.init(mockData)
        })



        //用ul实现点击事件的触发效果，但是控制台重复输出内容
        //采用对数据进行监听的方法 ，这种方法可以以后再修改
        ul.addEventListener('click',function(){
            let liss = document.querySelectorAll(".li")
            liss.forEach((item, index) => {
            //先把其他样式给干掉
                item.addEventListener("click", function () {
                //可以获取到点击的元素
                liss.forEach((item1, index1) => {
                    item1.className = 'li'
                })
                    clickItem = item
                    // console.log(item)
                    item.className = 'li border'
                })
            })
        })


        //采用proxy通过对lis的监听
        let liss = document.querySelectorAll(".li")
        console.log(liss)

    </script>
</body>

</html>